<template>
    <div class="login_box">
        <h1>商城后台管理系统</h1>
        <p>
            账号:
            <el-input
                v-model="form.adminname"
                type="text"
                placeholder="请输入您的用户名"
            />
        </p>
        <p>
            密码:
            <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入您的密码"
                show-password
            />
        </p>
        <el-button type="primary" @click="login">登录</el-button>
    </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { loginRequest } from "../api/login";
export default {
    data() {
        return {
            form: {
                adminname: "admin",
                password: "123456",
            },
        };
    },
    methods: {
        async login() {
            // 参数校验
            if (this.form.adminname === "" || this.form.password === "") {
                return ElMessage({
                    message: "账号或密码不能为空",
                    type: "warning",
                });
            }

            // 发送请求
            const data = await loginRequest(this.form);

            // 请求完毕后 做的事情
            if (data.code !== "200") {
                return ElMessage({
                    type: "warning",
                    message: data.message,
                });
            }

            ElMessage({
                type: "success",
                message: data.message,
            });

            // 存储用户信息
            this.$store.commit("setUserInfo", data.data);

            // 存储完毕后, 跳转到首页
            this.$router.push("/");
        },
    },
};
</script>

<style lang="scss" scoped>
.login_box {
    width: 300px;
    height: 200px;
    background-color: #dddcdc;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 20px 30px;

    h1 {
        text-align: center;
    }

    .el-input {
        width: 85%;
    }
    .el-button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
